<template>
  <div class="header">
    <Row>
      <i-col  span="12">
        <div class="logo">
          <img src="./u5.png" alt="">
        </div>
      </i-col >
      <i-col  span="12">
        <Row>
          <i-col span="24">
            <div class="user" v-if="logon_no">
              <router-link to="/login">登录</router-link>
              <router-link to="/signin">注册</router-link>
            </div>
            <div class="user log_in" v-else="logon_no">
              <div class="user-name">
                <router-link to="/personalInformation" class="a">{{user}}</router-link>
<!--                <span class="spa1">消息(<span>{{message}}</span>)</span>-->
                <span class="spa2" @click="out()">安全退出</span>
              </div>
            </div>
          </i-col>
          <i-col span="24">
            <div class="ipt user">
              <!--              <select v-model="value1" style="height: 30px; border-radius: 5px;border: 1px solid #dcdee2;color: #000">-->
              <!--                <option :value="item.value" v-for="item in List">{{ item.label }}</option>-->
              <!--              </select>-->
              <Input v-model="value" @on-click="search" icon="ios-search" placeholder="搜索期刊"/>
            </div>
          </i-col>
        </Row>
      </i-col >
    </Row>
  </div>
</template>

<script>
  import bus from '../../bus';
    export default {
      data() {
        return {
          URL: this.$api.url,
          logon_no:"",
          message:'3',
          user:'',
          model:'',
          value:'',
          value1:'期刊',
          List: [
            {
              value: '期刊',
              label: '期刊'
            },
            {
              value: '论文',
              label: '论文'
            },
            {
              value: '作者',
              label: '作者'
            },
            {
              value: '活动',
              label: '活动'
            },
          ],
          conceal:false,
          data:[],
          cur:'1',
        }
      },
      mounted(){
        this.username()
      },
      created() {
        bus.$on('cur', msg => {
          this.cur = msg;
          this.search()
        })
      },
      methods:{
        username(){
          this.user = localStorage.getItem('ms_user');
          if(this.user != null){
            this.logon_no = true;
            this.$nextTick(() => {
              this.logon_no = false
            })
          }else{
            this.logon_no = false;
            this.$nextTick(() => {
              this.logon_no = true
            });
          }
        },
        out(){
          localStorage.removeItem('ms_user');
          this.$router.push('/');
          this.$router.go(0)
        },
        search(){
          if(this.value1 == '期刊'){
            this.POST(this.value,this.URL+'/periodicals/queryPM/'+this.cur)
          }
          /*          if (this.value1 == '论文') {
                      this.POST(this.value,this.URL+'/thesis/selectPer/'+this.cur)
                    }
                    if(this.value1 == '作者'){
                      this.POST(this.value,this.URL+'/authors/frontendQuery/'+this.cur)
                    }
                    if(this.value1 == '活动'){
                      this.POST(this.value,this.URL+'/news/queryNews/'+this.cur)
                    }*/
          this.$router.push('/search');
        },

        POST(data,url){
          this.$axios({
            method: 'POST',
            headers: {'Content-Type': 'application/json;charset=UTF-8'},
            data: JSON.stringify(data),
            url: url,
          }).then((res) => {
            this.data = res.data;
            bus.$emit('data', this.data);
          })
        }
      }
    }
</script>

<style scoped>
  .header{
    height: 140px;
  }
  .header .logo{
    height: 140px;
    line-height: 140px;
  }
  .header .logo>img{
    height: 95px;
    vertical-align: middle;
  }
  .header .user,.header .log_in{
    text-align: right;
    padding-top: 20px;
  }
  .header .user>a{
    display: inline-block;
    width: 48px;
    height: 18px;
    color: #bebebe;
    font-size: 14px;
    text-decoration: underline;
  }
  .header .log_in .user-name{
    margin-right: 40px;
    font-size: 15px;
  }
  .header .log_in .user-name .a{
    display: inline-block;
  }
  .header .log_in .user-name .spa1{
    padding: 0 10px;
    display: inline-block;
  }
  .header .log_in .user-name .spa1>span{
    color: blue;
    padding: 0 5px;
    display: inline-block;
  }
  .header .log_in .user-name .spa1{
    display: inline-block;
  }
  .header .log_in .user-name .spa2{
    display: inline-block;
    padding-left: 10px;
    cursor:pointer;
  }
  .ipt>.ivu-input-wrapper{
    width: 380px;
    height: 38px;
  }
</style>
